@extends('shop::layouts.master')
@section('title')
    {{$title}}
@endsection
<style>
    .vehicle-list{
        height:420px; width:245px; overflow-y: scroll;border:1px solid #f3f3f3;
    }
    .layui-colla-title{
        float: left;
    }
    .cat-title{
        height: 30px;line-height: 30px; background-color: #f2f2f2; color: #1E9FFF;
    }
    .cat-title span{
        cursor:pointer;
    }
    .cate-list{
        cursor:pointer; color: #1E9FFF; margin-right: 6px;
    }
    .this{
        color: red;
    }
</style>
@section('tab')
    <div class="layui-fluid">
        <div class="layui-row">
            <form class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-container">
                        @foreach($cell as $k => $cl)
                            <span class="layui-btn layui-btn-primary layui-btn-xs" data-key="{{$k}}">{{$cl}}</span>
                        @endforeach
                    </div>
                </div>

                <div class="layui-form-item cateBrand" style="display: none">
                    <div class="layui-container">
                        <div class="layui-row">
                            <div class="layui-col-xs1" style="color:#333">当前已选品牌：</div>
                            <div class="layui-col-xs11" id="brand"></div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-container">
                        <div class="layui-row">
                            <div class="layui-col-xs3">
                                <div id="vehicle" class="vehicle-list"></div>
                            </div>
                            <div class="layui-col-xs3">
                                <div id="vehicle_child" class="vehicle-list"></div>
                            </div>
                            <div class="layui-col-xs6">
                                <div class="vehicle-list check-list" style="width:580px;">
                                    <div class="layui-collapse" lay-accordion="" id="checkList">
                                        @foreach($vehicle_model_data as $i => $item)
                                            <div class="layui-colla-item onlyKey" pid="{{$item['parent_id']}}">
                                                <h2 class="layui-colla-title" style="height:30px;line-height:30px;">{{$item['parent_name']}}</h2>
                                                <div class="cat-title"><span>编辑</span></div>
                                                <div class="layui-colla-content layui-show">
                                                    @foreach($item['name'] as $k => $v)
                                                    <input name="pid[]" type="hidden" value="{{$v['id']}}">【{{$v['name']}}】
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item" style="margin-left:20%">
                    <input name="maintain_shop_id" type="hidden" value="{{$maintain_shop_id}}">
                    <label for="L_repass" class="layui-form-label"></label>
                    <button class="layui-btn layui-btn-normal" lay-filter="add" lay-submit="">提交</button>
                    <button type="button" class="layui-btn layui-btn-sm" lay-demo="reload">清空重选</button>
                </div>
                <input id="jsonVehicle" type="hidden" value="{{$vehicle}}">
                <input id="checkData" type="hidden" value="{{$vehicle_model_ids}}">
                <input id="parentId" type="hidden" value="{{$parent_id}}">
            </form>
        </div>
    </div>
@endsection

@section('tab_js')
    <script>
        layui.use(['form', 'layer', 'jquery', 'tree', 'util'], function () {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer,
                util = layui.util,
                tree = layui.tree;
            var hasPid = [];
            var brandId = $('#parentId').val();

            //监听提交
            form.on('submit(add)', function (data) {
                $.ajax({
                    url: js_url('shop-add-maintain-vehicle'),
                    type: 'post',
                    data: data.field,
                    dataType: "json",
                    success: function (result) {
                        if (result.state === 0) {
                            layer.msg(result.msg, {time: 600, icon: 6}, function () {
                                xadmin.close();
                                xadmin.father_reload();
                            });
                        } else {
                            layer.msg(result.msg, {time: 600, icon: 5});
                        }
                    }
                });
                return false;
            });

            //创建一级树形组件
            var jsonVehicle = JSON.parse($('#jsonVehicle').val());
            tree.render({
                elem: '#vehicle'  //绑定元素
                //,showCheckbox: true
                //,accordion: true //手风琴效果
                , click: function (obj) {
                    getVehicleChild(obj.data.id)
                }
                , data: jsonVehicle
            });

            //默认获取第一个车系
            getVehicleChild(brandId);

            //异步请求获取某品牌下的所有车系
            function getVehicleChild(pid) {
                $.ajax({
                    url: js_url('shop-get-vehicle-child'),
                    type: 'get',
                    data: {pid: pid},
                    dataType: "json",
                    success: function (obj) {
                        if(obj){
                            brandId = pid;
                            vehicleChild(obj)
                        }else{
                            layer.alert('无数据');
                        }
                    }
                });
            }

            //创建二级树形组件
            function vehicleChild(obj) {
                tree.render({
                    elem: '#vehicle_child'  //绑定元素
                    , accordion: true //手风琴效果
                    , showCheckbox: true
                    , data: obj
                    , id: 'demoId1'
                    , oncheck: function (obj) {
                        var checkedData = tree.getChecked('demoId1'); //获取选中节点的所有数据
                        if (checkedData.length > 0) {
                            dataProcessing(checkedData);//节点有选中数据处理
                        }else {
                            delData(obj.data.pid)//取消选中
                        }
                        if(obj.checked == false){
                            allDataHandling(obj.data, obj.checked);
                        }
                    }
                });
                var checked = JSON.parse($('#checkData').val());
                tree.setChecked('demoId1', checked);//选中赋值
            }

            //选中数据处理
            function dataProcessing(checkData) {
                var list = '';
                var pid = checkData[0].pid;
                var nowCheckData = [];
                $.each(checkData, function (it, item) {
                    var childs = '';
                    $.each(item.children, function (key, val) {
                        childs += '<input name="pid[]" type="hidden" value="' + val.id + '">【' + val.title + '】';
                        nowCheckData.push(val.id);
                    });
                    list += '<div class="layui-colla-item onlyKey" pid=' + pid + '>' +
                        '<h2 class="layui-colla-title" style="height:30px;line-height:30px;">' + item.title + '</h2>' +
                        '<div class="cat-title"><span style="display: none">编辑</span></div>' +
                        '<div class="layui-colla-content layui-show">' + childs + '</div>' +
                        '</div>';
                });

                var onlyidAry = [];
                $('.onlyKey').each(function () {
                    var onlyid = $(this).attr('pid');
                    if (pid == onlyid) {
                        $(this).html(list);
                        $(this).find('.cat-title span').hide();
                        $(this).find('.layui-colla-content').attr("class", 'layui-colla-content layui-show');
                    } else {
                        $(this).find('.cat-title span').show();
                        $(this).find('.layui-colla-content').attr("class", 'layui-colla-content');
                    }
                    onlyidAry.push(onlyid);
                });

                //找不到该组就添加
                hasPid = $.unique(onlyidAry.sort());

                if ($.inArray(pid, hasPid) == -1) {
                    $('#checkList').prepend(list);
                    hasPid.push(pid);
                }
                layui.element.render();

                classOneToRed();
                allDataHandling(nowCheckData);
            }

            //处理历史数据
            function allDataHandling(data, isChecked = true) {
                var oldCheck = JSON.parse($('#checkData').val());
                if(isChecked == false){
                    if (data.children) {
                        $.each(data.children, function (i, item) {
                            oldCheck = $.grep(oldCheck, function(value) {
                                return value != item.id;
                            });
                        });
                    } else {
                        oldCheck = $.grep(oldCheck, function(value) {
                            return value != data.id;
                        });
                    }
                    $('#checkData').val(JSON.stringify(oldCheck));
                }else{
                    var allCheckData = $.unique($.merge(data,oldCheck).sort());
                    $('#checkData').val(JSON.stringify(allCheckData));
                }
            }

            //编辑
            $(document).on('click', '.cat-title span', function () {
                var pid = $(this).parent().parent().attr('pid');
                getVehicleChild(pid);
            });

            //取消选中
            function delData(pid){
                $('.onlyKey').each(function () {
                    if (pid == $(this).attr('pid')) {
                        $(this).remove();
                        hasPid = $.grep(hasPid, function(value) {
                            return value != pid;
                        });
                        classOneToRed();
                    }
                });
            }

            //设置一级有选中的将字体改为红色
            function classOneToRed() {
                var titleList = '';
                $('#vehicle .layui-tree-set').each(function () {
                    var id = $(this).attr('data-id');
                    var that = $(this).find('.layui-tree-txt');
                    if ($.inArray(id, hasPid) != -1) {
                        var color = brandId == id ? 'red' : '#1E9FFF';
                        that.css('color', color);

                        var title = that.html();
                        var cateList = brandId == id ? 'cate-list this' : 'cate-list';
                        titleList += '<span class="' + cateList + '" brand-id="' + id + '">' + title + '</span>';
                    } else {
                        that.css('color', '#555');
                    }
                });
                if(titleList){
                    $('.cateBrand').show();
                    $('#brand').html(titleList);
                }
            }

            //已配置的车系点击事件
            $(document).on('click', '.cate-list', function () {
                brandId = $(this).attr('brand-id');
                getVehicleChild(brandId);
            });

            //按钮事件
            util.event('lay-demo', {
                reload: function(){
                    //重载实例
                    tree.reload('demoId1', {});
                    $('#checkList').children().remove();
                    $('#checkData').val(JSON.stringify([]));
                    $('.cateBrand').hide();
                }
            });
        });

        //动画滚动
        $(document).on('click', '.layui-btn-xs', function () {
            var key = $(this).attr('data-key');
            var mainContainer = $('#vehicle');
            var scrollToContainer = mainContainer.find('.layui-tree-setHide:eq(' + key + ')');
            mainContainer.animate({
                scrollTop: scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
            }, 500);
        });
    </script>
@endsection




